import React, { useCallback } from 'react';
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin } from 'antd';
import { history } from 'umi';
// import { stringify } from 'querystring';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
// import { outLogin } from '@/services/ant-design-pro/api';
import type { MenuInfo } from 'rc-menu/lib/interface';

export type GlobalHeaderRightProps = {
  menu?: boolean;
};

/**
 * 退出登录，并且将当前的 url 保存
 */


const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {

  const onMenuClick = useCallback(
    (event: MenuInfo) => {
      const { key } = event;
      if (key === '/user/login') {
        // 删除登录信息
        localStorage.removeItem('userinfo');
        // 删除token
        localStorage.removeItem('token');
        // logout
        history.push('/user/login');
        return;
      }
      history.push(key);
    },
    [],
  );


  const menuHeaderDropdown = (
    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
      {menu && (
        <Menu.Item key="/userinfo">
          个人中心
        </Menu.Item>
      )}
      {menu && (
        <Menu.Item key="/users">
          用户管理
        </Menu.Item>
      )}
      {menu && (
        <Menu.Item key="/setting">
          系统设置
        </Menu.Item>
      )}
      {menu && <Menu.Divider />}
      <Menu.Item key="/user/login">
        退出登录
      </Menu.Item>
    </Menu>
  );
  const usermsg = JSON.parse(localStorage.getItem('userinfo') as string);
  return (
    <HeaderDropdown overlay={menuHeaderDropdown}>
      <span className={`${styles.action} ${styles.account}`}>
        {/* <Avatar size="small" className={styles.avatar} src={usermsg.avatar} alt="avatar" /> */}
        {/* <span className={`${styles.name} anticon`}>{usermsg.name}</span> */}
      </span>
    </HeaderDropdown>
  );
};

export default AvatarDropdown;
